import { Ref, ref, onMounted, onUnmounted } from 'vue';

function useClickOutside(element: Ref<HTMLElement | null>): Ref<boolean> {
  // 定义一个响应数据，处理是否点击的是下拉框内。
  const isClickOutside = ref<boolean>(false);
  const handler = (e: MouseEvent) => {
    if (element.value) {
      if (element.value.contains(e.target as HTMLElement)) {
        isClickOutside.value = false;
      } else {
        isClickOutside.value = true;
      }
    }
  };
  onMounted(() => {
    document.addEventListener('mousedown', handler);
  });
  onUnmounted(() => {
    document.removeEventListener('mousedown', handler);
  });
  return isClickOutside;
}
export default useClickOutside;
